<template>
    <div class="addCard">
      <div class="title">
        <div class="back-wrapper">
          <back></back>
        </div>
        添加影城会员卡
      </div>
      <div class="content">
        <div class="data-wrapper">
          <div class="line-block-item ">
            <div class="left">开卡影院</div>
            <div class="right chooseCinema" @click="isShow=true">
              <input type="text" class="ipt" v-model="checkedCinemaName">
              <div class="arrow-right"></div>
            </div>
          </div>
          <div class="line-block-item">
            <div class="left">卡号</div>
            <div class="right">
              <input type="text" class="ipt" v-model="cardNum">
            </div>
          </div>
          <div class="line-block-item">
            <div class="left">密码</div>
            <div class="right">
              <input type="password" class="ipt" v-model="password">
            </div>
          </div>
        </div>
        <div class="btn" @click="_bindVipCard">绑定会员卡</div>
      </div>
      <div class="cinemaList-wrapper" :class="{isShow:isShow}">
        <div class="name">影院列表
          <div class="cancel" @click="isShow=false"></div>
        </div>
        <div class="search-wrapper">
          <input type="text" class="search" v-model="cinemaName">
        </div>
        <div class="cinema-wrapper" ref="cinema-wrapper">
          <div class="cinema-container">
            <div class="item" v-for="item in cinemaList" @click="_getCheckedCinemaInfo(item)">
              <div class="left">{{item.name}}</div>
              <div class="right">{{item.distanceDesc}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import back from '../../../components/back/back'
  import BScroll from 'better-scroll'
  import {getStorage} from "../../../common/js/localStorage";
  import {getSession} from "../../../common/js/sessionStorage";
  import global from '../../../common/js/global'
  import {Toast} from 'mint-ui'
    export default {
        name: "addCard",
        components:{
          'back':back
        },
        data(){
          return{
            cinemaName:'',
            rows:10,
            cinemaList:[],
            isShow:false,
            checkedCinemaId:'',
            checkedCinemaName:'',
            cardNum:'',
            password:''
          }
        },
        mounted(){
          this._getSearchCinemaList()
          this.$nextTick(()=>{
            if(!this.scroll){
              // return
              let scroll = new BScroll(this.$refs['cinema-wrapper'],{click:true})
            }else {
              this.scroll.refresh();
            }
          })
        },
        methods:{
          //绑定会员卡
          _bindVipCard(){
            if(this.checkedCinemaId===''){
              return
            }
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/member/bindCinemaVipCard',
                data:{
                  cardNumber:this.cardNum,
                  cardPassword:this.password,
                  cinemaId:this.checkedCinemaId
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  Toast(res.data.data.msg)
                  this.$router.push({path:'/membershipCard'})
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.status)
              }

            })
          },
          //获取选中影院名称与id
          _getCheckedCinemaInfo(item){
            this.checkedCinemaId = item.id
            this.checkedCinemaName = item.name
            this.isShow = false
          },
          //获取搜索影院列表
          _getSearchCinemaList(){
            this.$axios(
              {
                method:'post',
                headers:{
                  "Content-Type":"application/json",
                  "MOBILE-DEVICE":'PSD_H5_1_MPS',
                  "JSESSIONID":getStorage('userInfo').JSESSIONID
                },
                url:global.$host+'/searchCinemas',
                data:{
                  name:this.cinemaName,
                  longitude:getSession('point').lng,
                  latitude:getSession('point').lat,
                  offset:0,
                  rows:this.rows,
                }
              }
            ).then((res)=>{
              if(res.status===global.ERR_OK){
                if(res.data.code===0){
                  // Toast(res.data.data.msg)
                  let data = res.data.data
                  this.cinemaList = data.cinemaModelList
                }else {
                  Toast(res.data.errorMsg)
                }
              }else {
                Toast('服务器错误，错误代码:'+res.status)
              }

            })
          },
        },
        watch:{
          'cinemaName'(){
            this._getSearchCinemaList()
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../common/stylus/mixin.styl"
  .addCard
    height 100%
    width 100%
    background #101011
    user-select none
    overflow hidden
    .title
      position relative
      padding 10px 0
      height 22px
      line-height 22px
      text-align center
      font-size 16px
      color #ffffff
      .back-wrapper
        position absolute
        left 0
        top 10px
        width 36px
        height 22px
    .cinemaList-wrapper
      height 100%
      position absolute
      width 100%
      top 0
      transform translate3d(0,100%,0)
      transition transform 0.3s
      overflow hidden
      background #101011
      .cinema-wrapper
        height calc(100% - 84px)
        overflow hidden
      .cinema-container
        .item
          display flex
          height 32px
          margin-bottom 10px
          background #19191b
          padding 0 10px
          line-height 32px
          .left
            flex 1
            text-align left
            color #ffffff
            font-size 13px
            overflow hidden
            text-overflow ellipsis
            white-space nowrap
          .right
            flex 0 0 80px
            text-align right
            font-size 10px
            color #7e8c8d
      .search-wrapper
        height 32px
        padding 0 10px
        margin-bottom 10px
        .search
          height 100%
          width calc(100% - 40px)
          padding-left 40px
          background #19191b url("btn-search.svg")no-repeat 10px center/16px 16px
          border none
          outline none
          color #ffffff
          font-size 12px
      .name
        position relative
        padding 10px 0
        height 22px
        line-height 22px
        text-align center
        font-size 16px
        color #ffffff
        .cancel
          height 16px
          width 16px
          background url("icon_cancel.svg")no-repeat center/12px 12px
          position absolute
          right 20px
          top 13px
      &.isShow
        transform translate3d(0,0,0)
        transition transform 0.3s
    .content
      height calc(100% - 72px)
      padding 20px 0px
      overflow hidden
      position relative
      .data-wrapper
        .line-block-item
          height 44px
          display flex
          border-1px(#525252)
          .left
            flex 0 0 80px
            padding-left 20px
            text-align left
            color #F7C20F
            height 44px
            line-height 44px
            font-size 14px
          .right
            flex 1
            line-height 44px
            text-align left
            .ipt
              height 100%
              width calc(100% - 80px)
              border none
              background none
              outline none
              color #ffffff
              overflow hidden
              white-space nowrap
              text-overflow ellipsis
            &.chooseCinema
              position relative
              .arrow-right
                position absolute
                top 16px
                right 20px
                height 12px
                width 6px
                background url('arrow_right.svg')no-repeat center center/6px 12px
      .btn
        height 52px
        margin 20px 10px
        background #F9C40D
        border-radius 3px
        line-height 52px
        font-size 18px
        &:active
          background #EEAC21

</style>
